iT邦幫忙

2022 iThome 鐵人賽

DAY 21
0

前情提要

useRef是一個函式,跟useState一樣接收一個參數,作為變數初始值。
不過 useRef 只會回傳一個有 current屬性 的 Object 。當更新 current 值並不會觸發 re-render

const renderCount = useRef(0);
// renderCount ={ current: 0 }

應用情境

component 在 state 變化時會重新渲染,但當我有一些數值不想被重新渲染影響時我們就可以使用useRef
不過除了這些 useRef還有以下使用情境

1.計算 render 次數
2.綁定 DOM 來控制 DOM 身上的一些事件
3.設定previous 的 State,不過也可以透過 useState達到,以下會附上範例

小筆記:更新 useRef 是 side Effect 的行為,所以記得寫在 useEffect 或 event handler 裡面

直接講這麼多不如直接呈現範例吧

function App() {
  const renderCount = useRef(0);

  useEffect(() => {
    console.count("change state 次數");
    renderCount.current += 1;
  });

  return (
    <p>render 次數:{renderCount.current}</p>
  );
}
function App() {
  const inputRef = useRef();
  // 情景二:綁定 DOM
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </div>
  );
}
function App() {
  const [counter, setCounter] = useState(0);
  const [prevCount, setPrevCount] = useState(counter);
  const previousValue = useRef('');
  
  useEffect(() => {
		// 情境三:用來記憶前值
    previousValue.current = counter
  }, [counter]);

  return (
    <div>
      <p>數字:點了 {counter} 次</p>
      <p>前一數值:{previousValue.current}</p>
      <p>前一數值state呈現:{prevCount}</p>
      <button
        onClick={() => {
          setCounter((counter) => counter + 1);
          setPrevCount(counter);
        }}
      >
        Click me !
      </button>
    </div>
  );
}

這邊奉上 codepen 以供參考


上一篇
認識 DOM
下一篇
同步非同步與 Async Await
系列文
前端技術研究30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言